<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件 refs-事件</title>
</head>

<body>
    <div id="demo1"></div>
    <div id="demo2"></div>
    <div id="demo3"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        class MyComponent extends React.Component {
            constructor(props) {
                super(props)
            }

            handlerClick = (e) => {
                console.log(this)
                alert(this.content.value)
            }

            handerlBlur = (e) => {
                console.log(this)
                console.log(this.content2)
                alert(this.content2.value)
            }

            render() {
                return (
                    <div>
                        <input type="text" ref={content => this.content = content} />
                        <button onClick={this.handlerClick}>提示数据</button>
                        <input  type="text" ref={content2 => this.content2 = content2}  
                        palcehodler='失去焦点提示内容' onBlur={this.handerlBlur} />
                    </div>
                )
            }
        }

        ReactDOM.render(<MyComponent />, document.getElementById('demo1'))
    </script>
</body>

</html>